<template>
	<view>
		<navBar title="咨询记录"></navBar>
		<view class="serach">
			<view class="iconfont icon-sousuo size28 color-333"></view>
			<input
				type="text"
				class="searchTxt"
				v-model="title"
				placeholder="搜索咨询记录"
				@confirm="confirm" />
		</view>

		<view
			class="list"
			:class="{ active: index == current }"
			v-for="(item, index) in pageData"
			@click="toUrl(`index?chat_Id=${item.id}`)"
			:key="index">
			<view class="listBox">
				<text class="title ellipsis">{{ item.title }}</text>
				<text class="time">{{ item.createTime }}</text>
			</view>

			<view class="d-flex a-center" v-if="current == index">
				<!-- <image :src="staticImg('d1.png')" class="d1Icon Icon"></image>-->
				<image
					:src="staticImg('d2.png')"
					class="d1Icon Icon"
					@click.stop="editContent(item, index)"></image>
				<image
					:src="staticImg('d3.png')"
					class="d3Icon Icon"
					@click.stop="delRecords(item, index)"></image>
			</view>
			<view
				class="iconfont icon-u4363_mouseOver color-666 size28"
				v-else
				@click.stop="current = index"></view>
		</view>

		<up-modal
			:show="show"
			title="修改记录"
			:asyncClose="true"
			showCancelButton
			@confirm="editConfirm"
			@cancel="show = false">
			<view class="slot-content">
				<input type="text" v-model="editTitle" class="editTitle" />
			</view>
		</up-modal>
	</view>
</template>

<script setup>
	import navBar from '@/components/navBar/navBar.vue';
	import {
		toUrl,
		Toast,
		Modal,
		staticImg,
		imgUrls,
		showLoading,
		hideLoading,
	} from '@/utils/utils.js';
	import Http from '@/utils/request.js';
	import { ref, computed, watch, nextTick, onUnmounted } from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline,
	} from '@dcloudio/uni-app';
	import { useMainStore } from '@/stores/index';

	const mainStore = useMainStore();
	const title = ref('');
	const pageData = ref([]);
	const page = ref(1);
	const limit = ref(10);
	const getMore = ref(true);
	const show = ref(false);
	const editTitle = ref('');

	const current = ref();
	onLoad(() => {
		getChatList();
	});

	const getChatList = () => {
		Http.get({
			url: '/api/ai/getChatList',
			data: {
				page: page.value,
				limit: limit.value,
				title: title.value,
			},
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			const result = res.rows || [];
			page.value == 1
				? (pageData.value = result)
				: (pageData.value = [...pageData.value, ...result]);
			if (result.length < limit.value) getMore.value = false;
		});
	};

	const delRecords = async (item, index) => {
		const result = await Modal('确定删除吗?');
		if (!result) return;
		console.log(item);
		Http.get({
			url: '/api/ai/deleteChat',
			data: {
				chatId: item.id,
			},
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			pageData.value.splice(index, 1);
			Toast(res.msg);
		});
	};
	const confirm = () => {
		page.value = 1;
		limit.value = 10;
		getMore.value = true;
		getChatList();
	};
	const editContent = (Item, Index) => {
		editTitle.value = Item.title;
		show.value = true;
	};
	const editConfirm = () => {
		if (!editTitle.value) return;

		Http.post({
			url: '/api/ai/editChat',
			data: {
				title: editTitle.value,
				id: pageData.value[current.value].id,
			},
		}).then((res) => {
			if (res.code != 0) return Toast(res.msg);
			pageData.value[current.value].title = editTitle.value;
			editTitle.value = '';
			show.value = false;
		});
	};

	onReachBottom(() => {
		if (!getMore.value) return;
		page.value++;
		getChatList();
	});
</script>

<style lang="scss">
	page {
		background-color: $page;
	}
</style>
<style lang="scss" scoped>
	.editTitle {
		width: 100%;
		height: 80rpx;
		padding: 0 20rpx;
		border: 1px solid #f1f1f1;
		font-size: 28rpx;
		color: #000;
	}
	.serach {
		width: 710rpx;
		height: 70rpx;
		background-color: #ffffff;
		border-radius: 35rpx;
		margin: 20rpx auto 0;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		.searchTxt {
			flex: 1;
			height: 70rpx;
			padding-left: 30rpx;
			font-size: 26rpx;
			color: #333;
		}
	}
	.list {
		width: 710rpx;
		padding: 20rpx 24rpx;
		margin: 24rpx auto 0;
		display: flex;
		align-items: center;
		border-radius: 20rpx;
		.listBox {
			flex: 1;
			display: flex;
			flex-direction: column;
			.title {
				color: #666;
				font-size: 28rpx;
			}
			.time {
				color: #999;
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}

		.Icon {
			padding: 20rpx;
		}
		.d1Icon {
			width: 34rpx;
			height: 34rpx;
		}
		.d3Icon {
			width: 28rpx;
			height: 34rpx;
		}
	}
	.active {
		background-color: #fff;
		.title {
			color: #000 !important;
		}
	}
</style>
